import React from "react";
import {Route} from "react-router-dom";

import { TabBar } from 'antd-mobile';
import News from "../News";
import HouseList from "../HouseList";
import Profile from "../Profile";
import Index from "../Index";
import CityList from "../CityList";

import "./index.css"
const tabItems=[
    {
        title:"首页",
        icon:"icon-ind",
        selectedTab:"/home"
    },
    {
        title:"找房",
        icon:"icon-findHouse",
        selectedTab:"/home/houseList"
    },
    {
        title:"资讯",
        icon:"icon-infom",
        selectedTab:"/home/news"
    },
    {
        title:"我的",
        icon:"icon-my",
        selectedTab:"/home/profile"
    }
]
export default class Home extends React.Component{
    state = {
        selectedTab: this.props.location.pathname,
    };
    componentDidUpdate(prevProp) {
        if(prevProp.location.pathname!==this.props.location.pathname){
            this.setState({
                selectedTab:this.props.location.pathname
            })
        }
    }
    /*学习提交记录*/
    renderTabBarItem(){
        return tabItems.map(item => <TabBar.Item
            title={item.title}
            key={item.title}
            icon={<i className={"iconfont " + item.icon}></i>}
            selectedIcon={<i className={"iconfont " +item.icon }></i>}
            selected={this.state.selectedTab === item.selectedTab}
            onPress={() => {
                this.setState({
                    selectedTab: item.selectedTab,
                });
                this.props.history.push(item.selectedTab)
            }}
        />)
    }
    render() {
        return <div className="home">
            <Route path="/home/news" component={News}/>
            <Route path="/home/citylist" component={CityList}/>
            <Route exact path="/home" component={Index}/>
            <Route path="/home/profile" component={Profile}/>
            <Route path="/home/houseList" component={HouseList}/>
                <TabBar
                    tintColor="#21b97a"
                    barTintColor="white"
                    noRenderContent="true"
                >
                    {this.renderTabBarItem()}
                </TabBar>

        </div>
    }
}